<template>
    <NewCard title="" :isright="true">
      <template slot="right">
        <el-button type="text" class="handleBtn" @click="keyClick">操作</el-button>
      </template>
        <div class="qualif-box">
            <!-- 关键资格 -->
            <h3><p>资格</p><p>或者</p></h3>
            <ul>
                <li v-for="(item,index) in qualifData" :key="index">
                  <el-popover placement="top-start" width="300" trigger="hover" :content="item.name">
                    <p slot="reference">{{item.name}}</p>
                  </el-popover>
                  <el-popover placement="top-start" width="300" trigger="hover" :content="getMaybeName(item)">
                    <p slot="reference">{{getMaybeName(item)}}</p>
                  </el-popover>
                </li>
            </ul>
            <!-- 底部按钮 -->
            <SubBtn>
              <template slot="btn">
                <el-button round @click="clickCopy">复制资格</el-button>
                <el-button round @click="clickStick">粘贴资格</el-button>
              </template>
            </SubBtn>
            <!-- <div class="bottomBtn">
                <el-button @click="clickCopy">复制</el-button>
                <el-button @click="clickStick">粘贴</el-button>
            </div> -->
        </div>

        <!-- 抽屉  -->
        <el-drawer
            title="编辑"
            size="40%"
            :visible.sync="editDrawer"
            @close="editDrawerClose">
            <!-- 关键资格 ************************* -->
            <div class="qualif-editbox">
                <h3>
                    <p>删除</p>
                    <p>资格</p>
                    <p>或者</p>
                </h3>
                <div class="edit-list" v-for="(item, index) in qualifData" :key="index">
                  <i class="el-icon-remove" @click="removeBtn(item)"></i>
                  <!-- 资格 -->
                  <el-popover placement="top-start" width="300" trigger="hover" :content="item.name">
                    <el-select slot="reference" v-model="item.id" placeholder="请选择关键资格" @change="changeQualif(item)">
                      <el-option
                        v-for="s in selectList"
                        :key="s.createTime"
                        :label="s.name"
                        :value="s.id"
                        v-show="getQualifShow(s)">
                      </el-option>
                    </el-select>
                  </el-popover>

                  <!-- 或者 -->
                  <!-- <el-popover placement="top-start" width="300" trigger="hover" :content="item.name">
                  </el-popover> -->
                  <!-- slot="reference" -->
                  <el-select v-model="item.maybe" multiple popper-class="multSelect" placeholder="请选择关键资格" @change="changeMaybe(item)">
                    <el-option
                      v-for="s in selectList"
                      :key="s.createTime"
                      :label="s.name"
                      :value="s.id"
                      v-show="getMaybeShow(item,s)">
                    </el-option>
                  </el-select>
                  
                </div>
                <!-- 添加图标 -->
                <p class="drawerAdd">
                  <svg-icon icon-class="add-icon" @click="addList"/>
                </p>
            </div>
        </el-drawer>

    </NewCard>
</template>

<script>
import NewCard from "@/wss/components/newCard.vue";
import SubBtn from "@/wss/components/subBtn.vue";
//防抖：debounce 用户触发事件过于频繁，只要最后一次事件的操作
import debounce from "lodash/debounce";
import { getLoanConditionListApi, editLoanConditionApi } from "@/wss/newApi_3-24/tool/loanCondition.js"
export default {
  name:'keyQualif',
  props:{
    conditionIds:{
      type: String,
    },
    supplyVarId:{
      type: String,
    },
    copyQualifData:{
      type: Array,
    },
  },
  components:{NewCard,SubBtn},
  data(){
    return{
      optionsList:[],//资格列表
      selectList:[],//用于选择的资格列表

      qualifData:[],// 1关键资格数据
      editBtnState: false,// 标识是否为保存按钮的状态
      editDrawer: false,//编辑材料的状态
      drawerState:false,//当前 材料抽屉的状态
      temTableList:[],//暂存的数据
    }
  },
  mounted(){
    this.getLoanConditionList() //获取资格列表

    //打开关键资格的抽屉
    this.$bus.$on('openKeyQua',()=>{
      this.editDrawer = true //显示编辑材料
    })
  },
  watch:{
    // 监听条件集合码
    conditionIds(newValue,oldValue){
      this.getLoanConditionList() //获取资格列表
    },
  },
  methods:{
    //打开关键资格的抽屉
    keyClick(){
      this.editDrawer = true //显示编辑材料
    },

    // 获取资格列表
    async getLoanConditionList(){
      let result = await getLoanConditionListApi()
      if(result.code==200){
        this.selectList = result.rows
        this.selectList.forEach(item=>{
          item.disabled = false
        })
        this.getQualifData()
      }
    },

    // 过滤出当前的条件集合码
    getQualifData(){
      let arr = []
      //条件集合码有的话才分割
      if(this.conditionIds){
        arr = this.conditionIds.split(',')
      }
      let filter = []
      arr.forEach(item=>{
        let itemArr = item.split('|')
        let obj = this.selectList.find(k=>{
          return k.id == itemArr[0]
        })
        // 过滤得出来的话才去push
        if(obj){
          // obj.maybe=[]
          let newItemArr = itemArr.slice(1);
          obj.maybe = newItemArr.map(Number)
          filter.push(obj)
        }
      })
      this.qualifData = JSON.parse(JSON.stringify(filter)) // 关键资格数据

      // 把已经选择的禁用
      this.qualifData.forEach(item=>{
        let obj = this.selectList.find(k=>{
          return item.id == k.id
        })
        obj.disabled = true
      })
    },

    // 点击添加一条数据
    addList(){
      // 如果之前的一条没点保存不给添加新的一条
      if(this.addBtnState) {
        this.$message({message: '请保存！',type: 'warning'});
        return
      }

      this.qualifData.push({
        id: null,//资格id
        name:'',//资格
        maybe: [],//或者
      })
    },

    // 回显或者选择器
    getMaybeName(item){
      let str = ''
      if(item.maybe.length){
        item.maybe.forEach(may=>{
          let obj = this.selectList.find(s=>{
            return s.id == may
          })
          if(str){
            str = str+','+obj.name
          }else{
            str = obj.name
          }
        })
      }
      return str
    },

    // 资格选择器改变的时候
    async changeQualif(item){
      // 在改状态之前改成false
      this.selectList.forEach(item=>{
        item.disabled = false
      })
      // 把已经选择的禁用
      this.qualifData.forEach(item=>{
        let obj = this.selectList.find(k=>{
          return item.id == k.id
        })
        obj.disabled = true
      })

      // 赋值名字
      this.selectList.forEach(s=>{
        if(s.id == item.id){
          item.name = s.name
        }
      })
      await this.editLoanCondition() //编辑接口
      this.$bus.$emit('againLoanList',true)// 刷新列表
    },

    // 资格选择器的显示隐藏
    getQualifShow(s){
      let arr = []
      this.qualifData.forEach(item=>{
        arr.push(item.id)
      })
      return !arr.includes(s.id)
    },

    // 或者选择器改变的时候
    async changeMaybe(item){
      await this.editLoanCondition() //编辑接口
      this.$bus.$emit('againLoanList',true)// 刷新列表
    },

    // 或者选择器是否显示
    getMaybeShow(item,s){
      if(item.id == s.id){
        return false
      }else{
        return true
      }
    },

    // 修改贷款产品的要求条件
    async editLoanCondition(){
      let arr = []
      this.qualifData.forEach(item=>{
        let maybe = item.maybe.join(',')
        let newId = ''
        if(maybe){
          newId = item.id.toString() +','+ maybe
        }else{
          newId = item.id.toString()
        }
        arr.push(newId)
      })
      console.log(arr,'xxxxxxxxxxxxxxxxxxxxxxx');
      let conditionIds = arr.join(',')
      let loanId = this.supplyVarId
      let data = {
        // id: this.supplyVarId,
        conditionIds: arr,
      }
      let result = await editLoanConditionApi(loanId,data)
      if(result.code==200){
        this.$message({message: '编辑成功',type: 'success'});
      }
    },

    // 删除的按钮
    async removeBtn(item){
      let index = this.qualifData.indexOf(item);// 获得下标
      this.qualifData.splice(index,1)// 根据下标去删数据
      await this.editLoanCondition()
      //然后刷新列表
      this.$bus.$emit('againLoanList',true)// 刷新列表
    },

    // 当关闭编辑项目材料的时候
    editDrawerClose(){
      this.$bus.$emit('againLoanList',true)// 刷新列表
    },

    // 点击复制按钮
    clickCopy(){
      this.$bus.$emit('copyDataBus',this.qualifData)
    },

    // 点击粘贴按钮
    clickStick: debounce(async function(){
      // 判断没有复制就不能粘贴
      if(this.copyQualifData.length<1) {
        this.$message({message: '请复制',type: 'warning'})
        return
      }

      // 把数据覆盖添加进去
      this.qualifData = this.copyQualifData
      await this.editLoanCondition()
      //然后刷新列表
      this.$bus.$emit('againLoanList',true)// 刷新列表
    },500),
  },
  computed:{
  },
}
</script>

<style scoped>
ul,h1,h3,h4,p {
  margin: 0;
  padding: 0;
  list-style: none;
}
.handleBtn{
  color: #f87a23;
  font-size: 12px;
}

/* 关键资格 */
.qualif-box{
    margin-bottom: 80px;
}
.qualif-box h3{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 12px;
  font-weight: 600;
  color: #909aaa;
  border-bottom: 1px solid #ebeef5;
  padding-bottom: 15px;
  margin: 0 30px;
  margin-top: 10px;
}
.qualif-box h3>p{
  width: 49%;
}
.qualif-box ul>li{
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  font-size: 14px;
  font-weight: 400;
  color: #2E3F5E;
  padding: 15px 30px;
}
::v-deep .qualif-box ul>li span{
  width: 49%;
}
.qualif-box ul>li p{
  width: 100%;
  overflow:hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  -o-text-overflow:ellipsis;
}
.qualif-box ul>li:hover{
  background-color: #F5F7FA;
}

/* 添加按钮 */
.bottomBtn{
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background-color: #F8F8F8;
  border-top: 1px solid #ECEDF0;
  z-index: 99;
}
.bottomBtn>.el-button{
  width: 100%;
  border: 0;
  background-color: #F8F8F8;
  line-height: 25px;
  color: #606E84;
}

.addAss-box{
  padding: 6px 30px;
}
::v-deep .bottomBtn .el-input .el-input__inner{
  height: 36px;
  line-height: 36px;
}
.addAss-btn{
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
}
.addAss-btn .el-input:nth-child(1){
  width: 25%;
}
.addAss-btn .el-input:nth-child(2){
  width: 35%;
}
.addAss-btn .el-button{
  height: 34px;
  padding: 0 20px;
  margin-left: 0;
  border-radius: 30px;
}
.addAss-btn .el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
}

.qualif-box .bottomBtn{
    display: flex;
    flex-wrap: wrap;
}
.qualif-box .bottomBtn>.el-button{
    width: 50%;
    border-right: 1px solid #ECEDF0;
    padding: 10px 0px;
    margin: 0;
}
.qualif-box .bottomBtn>.el-button:last-child{
    border-right: 0;
}

/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
.subBtn>.el-button >>> span,
.subBtn>.el-button >>> span>a{
    display: block;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>
<style scoped>
/* 编辑项目抽屉样式 */
::v-deep .el-drawer__header{
    border-bottom: 1px solid #EFEFEF;
    padding-bottom: 15px;
    margin-bottom: 20px;
}
::v-deep .el-drawer__header>span{
    font-size: 18px;
    font-weight: bold;
    color: #2E3F5E;
    padding-left: 20px;
    background: url('~@/wss/assets/image/icon/cardLeft.png') left center no-repeat;
    background-size: 7px;
}
/* 抽屉 */
.qualif-editbox{
    padding: 0 20px;
    margin-bottom: 60px;
}
.qualif-editbox h3{
  display: flex;
  flex-wrap: wrap;
  font-size: 12px;
  font-weight: 600;
  color: #909AAA;
  border-bottom: 1px solid #EBEEF5;
  padding-bottom: 15px;
}
.qualif-editbox h3>p:first-child{
  width: 10%;
}
.qualif-editbox h3>p:nth-child(2){
  width: 45%;
}
.qualif-editbox h3>p:nth-child(3){
  width: 45%;
}

.qualif-editbox .edit-list{
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid #EBEEF5;
}
.qualif-editbox .edit-list i{
    width: 8%;
    color: #909aaa;
    cursor: pointer;
}
::v-deep .qualif-editbox .edit-list>span{
  width: 44%;
}
.qualif-editbox .edit-list .el-select:nth-child(3){
  width: 44%;
}
::v-deep .edit-list .el-input .el-input__inner{
  border: 0;
}

.drawerAdd{
    width: 100%;
    padding: 12px 0;
    border-bottom: 1px solid #f5f7fa;
}
.drawerAdd svg{
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: #909aaa;
    margin-left: 10%;
    cursor: pointer;
}



/* 右侧按钮样式 */
::v-deep .subBtn{
  padding: 8px 30px!important;
  z-index: 99;
}
::v-deep .subBtn>.el-button{
  width: 100px;
  padding: 8px 0!important;
  font-size: 14px;
  color: #606E84;
}
.subBtn>.el-button >>> span,
.subBtn>.el-button >>> span>a{
    display: block;
}
::v-deep .subBtn>.el-button.el-button--primary{
  background-color: #F87A23;
  border-color: #F87A23;
  color: #fff;
}
</style>

<style>
.multSelect.el-select-dropdown.is-multiple .el-select-dropdown__item.selected{
  color: #F87A23;
}
</style>